<template>
    <div class="video-box" style="width: 100%; height: 100%" :id="id">
        <!-- <div class="video-box-content"  v-if="!videoUrl">暂无视频资源</div> -->
    </div>
</template>
<script setup lang="ts">
import Artplayer from "artplayer";
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import HlsPlugin from 'xgplayer-hls'
const props = defineProps({
    id: {
        //盒子id
        type: String,
        required: true
    },
    videoUrl: {
        type: String,
        default: () =>
            ""
        // "https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4"
    },
    poster: {
        //海报
        type: String,
        default: () => ""
    },
    name: {
        //监控名称
        type: String,
        default: () => ""
    },
    status: {
        type: String,
        default: () => ""
    },
    isautoplay: {
        //自动播放
        type: Boolean,
        default: true
    },
    isLive: {
        //直播模式
        type: Boolean,
        default: true
    },
    autoSize: {
        //控制适配
        type: Boolean,
        default: true
    }
});

watch(
    () => props.videoUrl,
    newUrl => {
        // if (player.value !== null) {
        //   player.value.destroy();
        //   player.value = null;
        // }
        // setTimeout(() => {
        //   initPlayer();
        // }, 500);
    },
    {
        deep: true
    }
);

onMounted(() => {
    setTimeout(() => {
        if (props.id && props.autoSize) {
            document.getElementById(props.id).style.aspectRatio = "16/9";
        }
        initPlayer();
    }, 500);
});
const player = ref(null);
const initPlayer = () => {
    player.value = new Player({
        id: 'mse',
        url: props.videoUrl,
        plugins: [HlsPlugin],
    })
    // player.value = new Artplayer({
    //   poster: props.poster,//海报
    //   container: "#" + props.id, //盒子
    //   muted: true, //播放暂停
    //   isLive: props.isLive, //直播模式
    //   url: props.videoUrl,
    //   fullscreen: true,
    //   // controlsList: ["nodownload"], //关闭控制条
    //   autoplay: props.isautoplay, //是否自动播放
    //   autoSize: props.autoSize, //是否适应盒子
    // });
    // player.value.contextmenu.show = false;
};
onBeforeUnmount(() => {
    if (player.value || player.value !== null) {
        player.value.destroy();
        player.value = null;
    }
});
</script>
<style scoped>
.video-box-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #fff;
    background-color: #000;
    aspect-ratio: 16/9;
}
</style>